<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>等级权益</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="../js/template-web.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/iscroll-lite.js"></script>
    <style>
        .item {
            border-radius: 5px;
            background-color: #FFFFFF;
            padding: 10px;
        }

        .objlist {
            margin-top: 20px;

        }

        .objitem {
            display: flex;
            align-items: center;
        }

        .l1 {
            background-color: #07c16030;
            border-radius: 10px;
            color: #07c160;
            font-size: 12px;
            text-align: center;
            width: 4em;
        }

        .weui-icon-checked:before {
            display: block;
            content: '\EA08';
            color: #07C160;
            font-size: 16px;
        }
    </style>
</head>

<body ontouchstart class="page-bg page-bd-15">
    <div id="tagnav" class="weui-navigator weui-navigator-wrapper">
        <ul class="weui-navigator-list" id="ul1">
            <!-- <li><a href="javascript:;">商城券礼包</a></li> -->

        </ul>
    </div>
    <div class="levellist" id="div2">

    </div>
</body>

</html>

<script type="text/template" id="temp1">
    {{each list item}}
    <li data-index={{$index}}><a href="javascript:;">{{item.RightName}}</a></li>
    {{/each}}
</script>
<script type="text/template" id="temp2">
    {{each list item}}
<div class="item">
    <div style="display:flex;align-items:center;">
        <div class="weui-avatar-circle">
            <img src="{{item.ImgUrl}}"">
            <span class=" weui-icon-success weui-icon-safe-warn"></span>
        </div>
        <div style="margin-left:20px;">
            <div class="page-hd-title">{{item.RightName}}</div>
            <div class="page-hd-desc">{{item.RightViceName}}</div>
        </div>
    </div>
    <div class="page-hd-title">权益介绍</div>
    <div class="page-hd-desc">{{item.Introduce}}</div>
    <div class="page-hd-title">权益对象</div>
    <div class="objlist">
        {{each levelList item2}}
        <div class="objitem">
            <div class="l1">LV{{$index}}</div>
            <div class="l2 page-hd-desc" style="margin-left: 20px;">{{item2.LevelName}}
              
            </div>
            {{if(item2.couponlist==0)}}
            <div class="l3 page-hd-desc" style="margin-left: 20px;">
                <div>无此权益</div>
            </div>
            {{else}}
            <div class="l3 page-hd-desc" style="margin-left: 20px;">
                {{each item2.couponlist item3}}
                <div>{{item3.CouponName}}</div> 
                {{/each}}
            </div>
            {{/if}}
            {{if(level==$index)}}
            <span class="weui-icon-checked"></span>
            {{/if}}
        </div> 
        {{/each}}
        {{if(item.Lock==1)}} 
        <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">未解锁，做任务升级</a>
        {{else}} 
        <a href="javascript:;" data-rightid="{{item.RightId}}" id="obtainCoupon" class="weui-btn weui-btn_primary">领卷</a>
        {{/if}}
    </div>
    {{/each}}
</div>
</script>
<script>

    lobsterh5.main({
        data: {
            levelList: [],
            rightList: [],
            memberrightList: [],
            membercouponList: [],
            level: 0,
            seleIndex: 0,
        },
        //初始化页面
        pageload: function () {
            this.data.level = lobsterh5.GetUrlParam("level");
            this.data.seleIndex = lobsterh5.GetUrlParam("seleIndex");
            this.initevent();
            this.getRightCoupon();
        },

        //初始化事件
        initevent: function () {
            var self = this;
            $("#ul1").on("click", "li", function () {
                self.data.seleIndex = $(this).data("index");
                self.setcoupon();
                var html = template("temp2", { list: [self.data.rightList[self.data.seleIndex]], levelList: self.data.levelList, level: self.data.level });
                $("#div2").html(html);
            })
            $("#div2").on("click", "#obtainCoupon", function () {
                lobsterh5.POST("/lowcode/APP20210728143245471/member/?fun=member.obtainCoupon", self.getObtainObj()).then(res => {
                    $.toast("领劵成功");
                }).catch(res => {
                    $.toast(res.msg, 'forbidden');
                });
            })
        },
        getRightCoupon() {
            lobsterh5.GET("/lowcode/APP20210728143245471/member/?fun=member.getRightCoupon", {
                userId: localStorage.getItem("userId")
            }).then(res => {
                this.data.levelList = res.levelList;
                this.data.rightList = res.rightList;
                this.data.memberrightList = res.memberrightList;
                this.data.membercouponList = res.membercouponList;
                this.setright();
                this.setcoupon();
                var html = template("temp1", { list: this.data.rightList });
                $("#ul1").html(html);

                var html = template("temp2", { list: [this.data.rightList[this.data.seleIndex]], levelList: this.data.levelList, level: this.data.level });
                $("#div2").html(html);
                TagNav('#tagnav', {
                    type: 'scrollToNext',
                    curClassName: 'weui-state-active',
                    index: this.data.seleIndex
                });
            }).catch(res => {

            })
        },
        setright() {
            var levelId = this.data.levelList[this.data.level].MemberLevelId;
            this.data.rightList.forEach(a => {
                var filter = this.data.memberrightList.filter(b => {
                    return b.MemberLevelId == levelId && b.RightId == a.RightId;
                })
                if (filter.length == 0)
                    a.Lock = 1;
                else
                    a.Lock = 0;
            })
        },
        setcoupon() {
            var rightId = this.data.rightList[this.data.seleIndex].RightId;
            this.data.levelList.forEach(a => {
                a.couponlist = this.data.membercouponList.filter(b => {
                    return b.LevelId == a.MemberLevelId && b.RightId == rightId;
                })
            })
        },
        getObtainObj() {
            var self = this;
            var LevelId = self.data.levelList[self.data.level].MemberLevelId;
            var RightId = self.data.rightList[self.data.seleIndex].RightId;
            var filter = this.data.membercouponList.filter(a => {
                return a.LevelId == LevelId && a.RightId == RightId;
            })
            return {
                UserId: localStorage.getItem("userId"),
                LevelId: LevelId,
                RightId: RightId,
                CouponIds: JSON.stringify(filter.map(n => n.CouponId))
            };
        }
    });

</script>